<script setup>
import { Toast } from 'vant'
import { ref } from 'vue'
import { addAddress, getRegionTree } from '@/api/address'

const name = ref('')
const phone = ref('')
const region = ref('')
const regionList = ref([])
const detail = ref('')
const show = ref(false)
const areaList = ref([])

const empty = () => {
  name.value = ''
  phone.value = ''
  region.value = ''
  regionList.value = []
  detail.value = ''
}

const onSubmit = async () => {
  await addAddress({
    form: {
      name: name.value,
      phone: phone.value,
      detail: detail.value,
      region: regionList.value
    }
  })
  Toast('添加成功')
  empty()
}

const validator = (val) => {
  return /1\d{10}/.test(val)
}

const onFinish = ({ selectedOptions }) => {
  show.value = false
  region.value = selectedOptions.map((option) => option.text).join('/')
  regionList.value = selectedOptions.map((option) => ({
    label: option.text,
    value: option.value
  }))
}

const init = async () => {
  const {
    data: { list }
  } = await getRegionTree()
  for (const k in list) {
    const province = list[k]
    const obj1 = { text: province.name, value: province.id, children: [] }
    areaList.value.push(obj1)

    for (const m in province.city) {
      const city = province.city[m]
      const obj2 = { text: city.name, value: city.id, children: [] }
      obj1.children.push(obj2)

      for (const n in city.region) {
        const region = city.region[n]
        const obj3 = { text: region.name, value: region.id }
        obj2.children.push(obj3)
      }
    }
  }
}
init()
</script>

<template>
  <div class="address">
    <van-nav-bar
      title="新增收货地址"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <div class="container">
      <p class="title">收货地址</p>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="请输入收货人姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="phone"
          name="电话"
          label="电话"
          placeholder="请输入收货人手机号"
          :rules="[
            { required: true, message: '请填写电话' },
            { validator, message: '手机号码不正确' }
          ]"
        />
        <van-field
          readonly
          clickable
          name="region"
          v-model="region"
          label="地区"
          placeholder="请选择省/市/区"
          @click="show = true"
          :rules="[{ required: true, message: '请填写地区' }]"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="areaList"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field
          v-model="detail"
          name="详细地址"
          label="详细地址"
          placeholder="街道门牌、楼层等信息"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="linear-gradient(90deg, #f9211c, #ff6335)"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.address {
  padding-top: 46px;
  padding-bottom: 50px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.container {
  width: 375px;
  height: 349px;
  font-size: 14px;

  .title {
    color: rgba(69, 90, 100, 0.6);
    padding: 10px;
  }
}
</style>
